<template>
    <div id="app">
        <el-tag @click="list" >用户管理</el-tag>
        <el-tag type="success" >部门管理</el-tag>
        <el-tag type="info" >角色管理</el-tag>
        <el-tag type="warning" >系统配置</el-tag>

        <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="pwd"
                    label="用户账号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="180">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[4, 8, 12, 16]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="16">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        el: '#app',
        data() {
            return {
                tableData: [{
                    id:'100001',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100002',
                    pwd: 'lisi',
                    name: '李四',
                    phone: '13900139000'
                }, {
                    id:'100003',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100004',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100005',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100006',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100007',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100008',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100009',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100010',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100011',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100012',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100013',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100014',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100015',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }, {
                    id:'100016',
                    pwd: 'zhangsan',
                    name: '张三',
                    phone: '13900139000'
                }],
                currentPage4: 1,
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            list(){
                this.$message("这是用户管理页面");
            },

        },
    }
</script>

<style scoped>

</style>